<template>
  <div id="pay" >
      <div class="flow">
          <ul>
              <li><div class="flow_li" :class="{select:is_select[0]}">填写个人信息</div></li>
              <li class="img"><img :src="arror[0]" alt=""></li>
              <li><div class="flow_li" :class="{select:is_select[1]}">确认支付</div></li>
              <li class="img"><img :src="arror[1]" alt=""></li>
              <li><div class="flow_li" :class="{select:is_select[2]}">支付完成</div></li>
          </ul>
      </div>

      <div v-if="flow_one">
          <div style="clear:left;"></div>
          <div class="address_list">
              <p class="confirm">请选择地址信息</p>
              <div class="address_card" v-if="!addressdata">
                    <div class="empty_address"><router-link :to="{name:'address'}" >请填写地址</router-link></div>
              </div>
              <div v-if="addressdata">
                <div class="address_card" v-for="(item,index) in addressdata" @click="confirm_address(index)">
                    <div class="select" v-if="is_check == item.id"></div>
                    <p class="address_name">{{ item.address_basic }}({{item.cargo_person }})</p>
                    <p class="address_detail">{{ item.address_detail }}</p>
                    <div class="address_btn"><div style="width: 50px;float: left"><router-link :to="{name:'address'}" >修改</router-link></div><div style="float: right;width: 80px;text-align: right;font:14px/18px '微软雅黑';color:#666">默认：<i class="fa fa-check" aria-hidden="true" v-if="item.is_default == 1"></i><i class="fa fa-times" aria-hidden="true" v-if="item.is_default == 0"></i></div></div>

                </div>
              </div>
          </div>
          <div style="clear:left;"></div>
          <div class="order_info">
              <p class="confirm">确认订单信息</p>
              <div class="food_info">
                  <table>
                      <tr class="thead">
                          <th width="350px">食物名称</th>
                          <th width="150px">商品类别</th>
                          <th width="100px">单价</th>
                          <th width="200px">数量</th>
                          <th width="200px">运费</th>
                          <th width="100px">小计</th>
                      </tr>
                      <tr>
                        <td><img :src="fooddata.img_url" alt=""><p class="name">【淘点网】{{ fooddata.title }}</p></td>
                        <td>{{ fooddata.typename }}</td>
                        <td><span style="font:bold 15px/20px '微软雅黑';color:#cc0000">￥{{ fooddata.price_old | currency }}</span></td>
                        <td>
                          <div class="num_change">
                                <computeds :num="food_num" @resnum="change" :index="index"></computeds>
                          </div>
                        </td>
                        <td><span style="font:bold 15px/20px '微软雅黑';color:#cc0000">￥{{ fooddata.freight | currency }}</span></td>
                        <td><span style="font:bold 15px/20px '微软雅黑';color:#cc0000">￥{{ total | currency }}</span></td>
                      </tr>
                      <tr v-if="is_show">
                          <td colspan="6">
                              <div class="friendly">备注：{{ summary_value }}</div>
                          </td>
                      </tr>
                      <tr>
                          <td colspan="6">
                            <div class="friendly">友情提示：确认价格后提交订单，防止误操作</div>
                            <button class="commit" @click="confirm_order">提交订单</button>
                            <button class="summary" @click="addsummary">添加备注</button>
                          </td>
                      </tr>
                  </table>
              </div>
          </div>
          <my-dialog :is-show="isShowsummaryDialog" @on-close="closeDialog('isShowsummaryDialog')">
                <summary-board @summary-dialog="onSuccesssummary" :summary="summary_value"></summary-board>
          </my-dialog>
      </div>
      <div v-if="flow_two">
          <div style="clear:left;"></div>
          <div class="order_info">
              <p class="confirm">确认支付</p>
              <div class="food_info">
                  <table>
                      <tr>
                          <td width="300px">
                               <span class="title">订单号:</span>&nbsp;&nbsp;{{ order.order_name }}
                          <td width="200px">
                              <span class="title">总计:</span>&nbsp;&nbsp;<span style="font:bold 15px/20px '微软雅黑';color:#cc0000">￥{{ order.total_price }}</span>
                          </td>
                          <td width="500px">
                              <span class="title">送至:</span>&nbsp;&nbsp;{{ order.address }}
                          </td>
                      </tr>
                      <tr>
                          <td colspan="6">
                            <div class="friendly">友情提示：确认价格后提交订单，防止误操作</div>
                            <button class="commit" @click="confirm_pay">确认支付</button>
                          </td>
                      </tr>
                  </table>
              </div>
          </div> 
          <my-dialog :is-show="isShowqrcodeDialog" @on-close="closeDialog('isShowqrcodeDialog')">
                  <div class="qrcode">
                        <p>请用微信扫描图中二维码</p>
                        <p><img :src="qrcode_url" alt=""></p>
                  </div>
          </my-dialog>         
        </div>
      <div v-if="flow_three">
          <div style="clear:left;"></div>
          <div class="order_info">
              <p class="confirm">支付完成</p>
              <div class="food_info">
                  <table>
                      <tr>
                          <td width="1000px"><span class="pay_success">支付完成，请等待发货</span></td>
                      </tr>

                  </table>
              </div>
          </div> 
 
        </div>
   </div>

</template>

<script>
import Dialog from '../Public/dialog.vue'
import summary from '../index/summary.vue'
import computeds from '../Public/computed.vue';
export default {
  data () { 
    return {
      index:0,
      img_url:'./static/img/food3.jpg',
      food_num:1,
      single:16,
      freight:4,
      fooddata:'',
      isShowsummaryDialog:false,
      isShowqrcodeDialog:false,
      summary_value:'',
      flow_one:false,
      flow_two:false,
      flow_three:false,
      address:'',
      order:'',
      is_select:[false,false,false],
      arror:['./static/img/arror.png','./static/img/arror.png'],
      qrcode_url:'',
      time:'',
      addressdata:'',
      is_check:''
    }
  },
  created:function(){
    var uid=this.$cookie.get('uid');

    if(uid == null || this.$route.params.flow >2 ){
      this.$router.push({path:'/'});
      return false;
    }
    this.food_num=this.$route.params.num;
    this.change_status();
    this.get_address();
  },
  components: {
    MyDialog: Dialog,
    summaryBoard:summary,
    'computeds':computeds
  },
  computed:{
    total:function(){
      return Math.round((this.fooddata.price_old*this.food_num+this.fooddata.freight)*100)/100;
    },
    is_show:function(){
      if(this.summary_value !=''){
        return true;
      }else{
        return false;
      }
    }
  },
   filters: {
      currency: function (value) {
        return parseInt(value).toFixed(2);
      }
    },
  methods: {
    get_food_data(fid){
        this.$http({
            method:'GET',
            url:'http://123.56.86.203/fooddetail?fid='+fid,
        }).then(function(info){
          var data=info.data;
        if(data.status == 0){
            this.fooddata=data.info;
        }else{
            window.location.href='./'
          }
        },function(error){
              console.log(error);
        })
    },
    //通过订单编号获取订单数据
    get_order_data(orderid){
        var orderid=this.$cookie.get('ordername');
        this.$http({
            method:'GET',
            url:'http://123.56.86.203/orderdetail?order_name='+orderid,
        }).then(function(info){
          var data=info.data;
         
        if(data.status == 0){

            this.order=data.info;
            if(this.order.pay == '已支付'){
              this.$router.push({ name: 'paysuccess'});
              window.location.reload();
              clearInterval(this.time); 
            }

        }else{
            window.location.href='./'
        }
        },function(error){
              console.log(error);
        })
    },
    change(data){
      this.food_num=data.number;
    },
    //确认订单
    confirm_order(){
      var order_value=new Object();
      if(this.address==''){
        alert('请选择收货地址');
        return;
      }
      order_value={address:this.address,buy_person:this.$cookie.get('username'),food_id:this.fooddata.id,total_price:this.total,summary:this.summary_value};
        this.$http.post("http://123.56.86.203/orderadd",
          {
              order_value
          },
          {emulateJSON:true}
        ).then(response=>{
            var data=response.data;
            if(data.status == 0){

                this.$router.push({ name: 'pay', params: { flow:2}});
                //设置订单编号
                this.$cookie.set('ordername',data.info.order_name); 
                this.change_status();
            }else{
              alert('提交订单失败，请重试或者联系客服');
            }
        })

    },
    closeDialog (attr) {
      this[attr] = false
    },
    addsummary(){
      this.isShowsummaryDialog=true;
    },
    onSuccesssummary(data){
      this.summary_value=data;
      this.closeDialog ('isShowsummaryDialog');
    },
    confirm_pay(){
        //取得二维码的base64
          var orderid=this.$cookie.get('ordername');

        this.$http({
            method:'GET',
            url:'http://123.56.86.203/pay?orderid='+orderid,
        }).then(function(info){
            var data=info.data;
            if(data.status == 0){
                this.qrcode_url='http://123.56.86.203/qrcode?text='+data.qrcode;
                this.isShowqrcodeDialog=true;
                this.checkorder_success();
            }else{
                alert('订单不存在，请重新下单');
            }
        },function(error){
              console.log(error);
        })
    },
    //状态改变
    change_status(){
      if(this.$route.params.flow==1){
          var fid=this.$route.params.fid;
          this.flow_one=true;
          this.is_select[0]=true;
          this.arror[0]='./static/img/arror_success.png';
          this.get_food_data(fid); 

      }else if(this.$route.params.flow==2){
          this.flow_one=false;
          this.flow_two=true;
          this.is_select[0]=true;
          this.is_select[1]=true;
          this.arror[0]='./static/img/arror_success.png';
          this.arror[1]='./static/img/arror_success.png';
          var orderid=this.$cookie.get('ordername');
          this.get_order_data(orderid);
      }
    },
    //检测是否支付完成
    checkorder_success(){
        var orderid=this.$cookie.get('ordername');
        this.time=setInterval(this.get_order_data,3000);
    },
    //获取地址列表
    get_address(){
        var uid = this.$cookie.get('uid');
      this.$http({
          method:'GET',
              url:'http://123.56.86.203/address?uid='+uid,
      }).then(function(info){
          var data=info.data;
          if(data.status == 0){
            this.addressdata=data.info;
            for(var i=0;i<this.addressdata.length;i++){
                if(this.addressdata[i].is_default == 1){
                  this.address=this.addressdata[i].address_basic+this.addressdata[i].address_detail;
                  this.is_check=this.addressdata[i].id;
                }
            }
          }
      },function(error){
            console.log(error);
      })
    },
    confirm_address(index){
      var c=confirm('确认选用改地址？');
      if(c){
          this.address=this.addressdata[index].address_basic+this.addressdata[index].address_detail;
          this.is_check=this.addressdata[index].id;

      }
    }
  }
}
</script>

<style scoped>
i{
  color:#cc0000;
  font-size: 20px;
}
#pay{
  width:1000px;
  margin:0 auto;
}

.bt{
   width: 100%;
  height: 25px;
  font:13px/25px '微软雅黑';
}
#pay .flow{
  width: 100%;
  margin-top:15px;
  padding:20px 20%;
}
.flow ul li{
  float: left;
  margin-right: 1.2%;
}
.flow ul li .flow_li{
  width: 120px;
  height: 80px;
  background-color: #FF6838;
  color:#fff;
  border-radius: 50%;
  text-align: center;
  font:14px/80px '微软雅黑';
}
.flow ul li .select{
  background-color: #5FB878;
}
.flow ul .img{
  width: 90px;
}
.flow ul .img img{
  width: 100%;
  margin-top:20px;
}
.address_list{
  width: 92%;
  padding:10px 0%;
  margin-top: 20px;
}
.address_list .address_card{
  width: 227px;
  height: 96px;
  background:url('../../assets/address_bg.png');
  background-repeat: no-repeat;
  padding:10px;
  float: left;
  margin-right: 15px;
  position: relative;
}
.address_list .address_card .select{
    width:30px;
    height:30px;
    background: url('../../assets/check.png');
    position: absolute;
    z-index: 10;
    left: 80%;
}
.address_list .address_card .address_name{
  height: 24px;
  font:bold 15px/24px '微软雅黑';
  color:#666;
  width: 95%;
  border-bottom: 1px solid #eee;
}
.address_list .address_card .address_detail{
  width: 90%;
  font:14px/18px '微软雅黑';
  color:#333;
  margin-top: 8px;
  height:36px;
}
.address_list .address_card .address_btn{
  width: 90%;

}
.address_list .address_card .address_btn a{
    font:14px/15px '微软雅黑';
    color:#CC9977;
}
.address_list .address_card .empty_address{
  text-align: center;
  height: 20px;
  margin-top:13%;
  width: 100%;
}
.address_list .address_card .empty_address a{
  color:#999;
}
.order_info{
  width: 100%;
  margin-top: 30px;

}
.confirm{
  width: 96%;
  padding-left:1%;
  font:bold 15px/25px '微软雅黑';
  color:#333;
  margin-bottom: 15px;
}
.order_info .food_info{
  margin-top: 10px;
  width: 100%;
  border-bottom: 1px dashed #ccc;
}
.order_info .food_info table .thead th{
  height: 25px;
  font:15px/25px '微软雅黑';
  color:#333;
  border-bottom:3px solid #B2D1FF;
}
.order_info .food_info table tr td{
  padding:10px;
  font:14px/20px '微软雅黑';
  color:#333;
  text-align: center;
  background-color: rgba(255,255,255,0.5);
}
.order_info .food_info table tr td .name{
  margin-top:6%;
  float: left;
  margin-left: 10px;
  font:14px/20px '微软雅黑';
  color:#333;

}
.order_info .food_info table tr td img{
  width: 20%;
  height: 60px;
  float: left;
}
.order_info .food_info table tr td .num_change{
  margin-left: 17%;
}

.order_info .food_info table tr td .commit{
  width: 120px;
  height: 40px;
  background-color: #FF0036;
  text-align: center;
  color: #fff;
  font:15px/38px '微软雅黑';
  float: right;
  border: 1px solid #FF0036;
  margin-right: 5px;
}
.order_info .food_info table tr td .summary{
  width: 120px;
  height: 40px;
  background-color: #34A8FF;
  text-align: center;
  color: #fff;
  font:15px/38px '微软雅黑';
  float: right;
  border: 1px solid #34A8FF;
  margin-right: 10px;
}
.order_info .food_info table tr td .friendly{
  float: left;
  margin-left:15px;
  height: 40px;
  font:13px/40px '微软雅黑'; 
  width: 50%;
  color: #999;
  text-align: left;
}
.order_info .food_info table tr td .title{
  font:bold 15px/40px;
  color:#F7B824;
}
.order_info .food_info table tr td .pay_success{
  text-align: center;
  line-height: 50px;
}
.qrcode{
  width: 100%;

}
.qrcode p{
  text-align: center;
}

</style>
